<template>
  <div class="object-style">
    <suspense>
    <template #default>
      <schema-item
        v-for="(name,index) in propertyKeys"
        :key="index"
        :name="name"
        :prefix="prefix"
        :data="data"
        :editorId="editorId"
        :disabled="disabled"
      ></schema-item>
    </template>
    <template #fallback>
      <div>
        <!-- Loading... -->
      </div>
    </template>
  </suspense>
  </div>
</template>
<script>
import { computed, defineComponent, defineAsyncComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'SchemaObject',
  components: {
    'schema-item': defineAsyncComponent(() => import('./SchemaItem.vue'))
  },
  props: {
    prefix: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => {}
    },
    editorId: {
      type: String,
      default: 'editor_id'
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state = reactive({
      tagPaddingLeftStyle: {},
      items: props.items

    });
    const propertyKeys = computed(() => {
      // 防止properties不存在报错:Cannot convert undefined or null to object
      const properties = props.data.properties || {};
      const keys = Object.keys(properties);
      return keys;
    })
    return {
      ...toRefs(state),
      propertyKeys,
    }
  }
})
</script>

<style scoped>
</style>